<template>
	<view>
		<dsl-navbar title="商品详情" isBack="" bgTopImg='white' src='/static/home/modules/icon_gengduo.png'></dsl-navbar>
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper_image">
				<swiper-item v-for="(jitem,index) in goodsData.images_array">
					<image :src="urls+jitem" mode="aspectFill" class="swiper_image"></image>

				</swiper-item>
			</swiper>
		</view>
		<view class="padding">
			<view class="rowsb">
				<view class="commodity_title onelineshow">
					{{goodsData.name}}
				</view>
				<view class="commodity_sales">

				</view>
			</view>
			<view class="rowsb margin-top-sm">
				<view class="commodity_pay">
					<text style="font-size: 22rpx;">￥</text>
					{{goodsData.price}}
				</view>
				<view class="">
					<text class="commodity_integral">{{goodsData.sales_volume}}人已付款</text>
				</view>
			</view>
		</view>
		<view class="align-center rowsb solid-bottom padding">
			<view class="align-center ">
				<view class="text-gray">规格</view>
				<view class="margin-left">默认</view>
			</view>
			<view class="cuIcon-right"></view>
		</view>
		<view class="align-center rowsb padding">
			<view class="align-center ">
				<view class="text-gray">配送费用</view>
				<view class="margin-left">{{goodsData.freight}}</view>
			</view>
			<view class="cuIcon-right"></view>
		</view>
		<!-- 	<view class="align-center rowsb padding">
			<view class="align-center ">
				<view class="text-gray">优惠</view>
				<view class="margin-left" style="color: #F57604;">满10减-300</view>
			</view>
			<view class="cuIcon-right"></view>
		</view> -->
		<view style="height: 16rpx;background: #EDEEF3;"></view>
		<view class="text-center padding">
			<view class="introduce_title">
				商品信息
			</view>
			<view class="introduce_title_heng"></view>
		</view>

		<view class="padding introduce_content">
			<view v-html="goodsData.content"></view>
		</view>

		<view class="align-center rowsb  submit_bottom">
			<view class="text-center" @click="$tools.push('shopping')">
				<image src="../../static/icon/kefu.png" mode="" class="shopping_icon"></image>
				<view class="shopping_title">客服</view>
			</view>
			<view class="text-center" @click.sotp="operationCollection()">
				<image src="../../static/icon/shoucang.png" mode="" class="shopping_icon"></image>
				<view class="shopping_title">收藏</view>
			</view>
			<view class="align-center">
				<view class="submit_left" @click="orderMen()">
					加入购物车
				</view>
				<view class="submit_right" @click="orderMen()">
					立即下单
				</view>
			</view>
		</view>
		<view class="warp" v-if="isWarp" @click="isWarp = false">
			<view class="bg-white warp_bottom padding animation-slide-bottom" @click.stop>
				<view class="cuIcon-close text-right text-black" @click="isWarp = false"></view>
				<view class="flex">
					<image :src="urls+goodsData.image" mode="aspectFill" class="shop_image"></image>
					<view class="margin-left">
						<view class="text-red text-bold text-lg">¥{{price?price:goodsData.price}}</view>
						<view class="text-sm text-gray margin-top-lg">库存：{{goodsData.stock}}件</view>
						<view class="margin-top-xs">商品：{{goodsData.name}}</view>
					</view>
				</view>
				<view v-for="(item,index) in goodsData.spec_json_array.spec_attr" :key="index">
					<view class="text-bold margin-tb">{{item.group_name}}</view>
					<view class="flex flex-wrap">
						<view v-for="(item01,index01) in item.spec_items" :key='index01' @click="specMen(index,index01)"
							class="table" :class="{'active_table':item01.isT == 1}">
							{{item01.spec_value}}
						</view>
					</view>
				</view>
				<view class="rowsb align-center">
					<view class="text-bold margin-tb">
						购买数量
					</view>
					<view class="justify-end margin-bottom">
						<view class="shop_caozuo">
							<view class="shop_jian" @click="shopJian()">-</view>
							<view class="shop_num">{{nums}}</view>
							<view class="shop_add" @click="nums++">+</view>
						</view>
					</view>
				</view>
				<view class="rowsb margin-top">
					<view class="submit1" @click="addShoopCat()">加入购物车</view>
					<view class="submit2" @click="goodsSubmit()">立即付款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		getDetails,
		operationCollection,
		urls,
		addShoopCat
	} from '../../common/path.js'
	export default {
		data() {
			return {
				id: '', //详情id
				urls: urls, //拼接字符串
				goodsData: {}, //商品详情
				isWarp: false,
				num: 0, //规格1
				specNum: 0, //默认选中
				nums: 1, //默认数量
				price:'',//选中价格



				goodsTitleList: [], //已选
			}
		},
		onLoad(Option) {
			this.id = Option.id
			this.getDetails()
		},
		methods: {
			//加入购物车
			addShoopCat() {
				let list = []
				let string = ''
				let array = this.goodsData.spec_json_array.spec_attr
				array.forEach(item => {
					item.spec_items.forEach((item01, index) => {
						if (item01.isT == 1) {
							list.push(item01.item_id)
							string += '_' + item01.item_id
						}
					})
				})
				if (list.length != array.length) { //选择的规格 不等同于 商品拥有的规格
					this.$tools.showToast('规格选择不完整')
					return
				}
				if (list.length == 1) {
					string = list.toString()
				} else {
					string = string.substring(1, string.length)
				}
				let data = {
					id: this.id,
					number: this.nums,
					spec_id: string
				}
				this.Http.POST(addShoopCat, data)
					.then((res) => {
						if (res.code == 1) {
							console.log('[购物车]', res);
						}
					})
			},

			//减少
			shopJian() {
				if (this.nums > 1) {
					this.nums--
				} else {
					this.$tools.showToast('最少不能少于1')
				}
			},
			//确认订单
			orderMen() {
				this.isWarp = true
				return
				uni.navigateTo({
					url: 'goodsubmit2'
				})
			},
			addMyChat() {
				this.$tools.showToast('加入购物车成功')
			},
			/**
			 * @description 多规格
			 * @param {number} i 主分类
			 * @param {number} j 子分类
			 */

			specMen(i, j) {
				let array = this.goodsData.spec_json_array.spec_attr
				array[i].spec_items.forEach((item, index) => {
					item.isT = 2
					console.log('[j]', j, '[index]', index);
					if (j == index) {
						item.isT = 1
						console.log('[触发]');
					}
				})
				
				
				
				
				let list = []
				let string = ''
				array.forEach(item => {
					item.spec_items.forEach((item01, index) => {
						if (item01.isT == 1) {
							list.push(item01.item_id)
							string += '_' + item01.item_id
						}
					})
				})
				
			
				let spec_list = this.goodsData.spec_json_array.spec_list
				console.log(list);
				if (list.length == 1) {
					string = list.toString()
				} else {
					string = string.substring(1, string.length)
				}
				spec_list.forEach(item=>{
					if(item.spec_sku_id == string){
						console.log('[选中的]',item.form.price);
						this.price = item.form.price
					}
				})
				
				
			},
			goodsSubmit() {
				let list = []
				let string = ''
				let array = this.goodsData.spec_json_array.spec_attr
				
				array.forEach(item => {
					item.spec_items.forEach((item01, index) => {
						if (item01.isT == 1) {
							list.push(item01.item_id)
							string += '_' + item01.item_id
						}
					})
				})
				if (list.length != array.length) { //选择的规格 不等同于 商品拥有的规格
					this.$tools.showToast('规格选择不完整')
					return
				}
				if (list.length == 1) {
					string = list.toString()
				} else {
					string = string.substring(1, string.length)
				}
				
				console.log(list);
				 
				this.goodsData.num = this.nums
				app.goods = this.goodsData
				uni.navigateTo({
					url: 'goodsubmit2?id=' + string
				})
			},
			//商品详情
			getDetails() {
				// console.log('[商品详情]',getDetails);
				this.Http.POST(getDetails, {
						id: this.id
					})
					.then((res) => {
						// console.log('[商品详情]',res);
						if (res.code == 1) {
							res.data.spec_json_array.spec_attr.forEach(item => {
								item.isT = 2
								item.spec_items.forEach(item01 => {
									item01.isT = 2
								})

							})
							this.goodsData = res.data
							console.log('[商品详情]', this.goodsData);
						}
					})
			},
			//收藏 取消收藏
			operationCollection() {
				this.$tools.showToast2('收藏成功')
				let data = {
					id: this.id
				}
				this.Http.POST(operationCollection, data)
					.then((res) => {
						if (res.code == 1) {
							console.log('[收藏状态]', res);
						}
					})
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 120rpx;
		background-color: #F7F7F7;
	}

	.swiper_image {
		width: 750rpx;
		height: 420rpx;
		/* background: #1E52A7; */
		opacity: 1;
	}



	.commodity_title {
		width: 500rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #171D34;
		opacity: 1;
	}

	.commodity_sales {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #777777;
		opacity: 1;
	}

	.commodity_content {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9AA2B5;
		opacity: 1;
	}

	.commodity_pay {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF4929;
		opacity: 1;
	}

	.commodity_integral {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #9AA2B5;
		opacity: 1;
	}

	.commodity_quiz {
		width: 42rpx;
		height: 42rpx;
	}

	.introduce_title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3F454A;
		opacity: 1;
	}

	.introduce_title_heng {
		width: 78rpx;
		height: 14rpx;
		background: #FF6B2B;
		opacity: 1;
		border-radius: 7rpx;
		margin: 0 auto;
		margin-top: -10rpx;
	}

	.introduce_content {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 62rpx;
		color: #9AA2B5;
		opacity: 1;
	}

	.shopping_icon {
		width: 46rpx;
		height: 46rpx;
	}

	.shopping_title {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF6B2B;
		opacity: 1;
	}

	.submit_left {
		width: 240rpx;
		height: 92rpx;
		background: #FFDA33;
		opacity: 1;
		border-radius: 46rpx 0px 0px 46rpx;
		line-height: 92rpx;
		text-align: center;
		color: white;
	}

	.submit_right {
		width: 240rpx;
		height: 92rpx;
		background: linear-gradient(180deg, #FF6B2B 0%, #FF8A19 100%);
		opacity: 1;
		border-radius: 0rpx 46px 46px 0rpx;
		line-height: 92rpx;
		text-align: center;
		color: white;
	}

	.submit_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx;
	}

	.warp_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.table {
		width: 154rpx;
		height: 55rpx;
		background: #F1F1F1;
		opacity: 1;
		border-radius: 28rpx;
		line-height: 55rpx;
		color: white;
		text-align: center;
		margin-right: 30rpx;
		color: #787878;
	}

	.active_table {
		background: #FDC22B !important;
		color: white;
	}

	.shop_left {
		width: 161rpx;
		height: 100rpx;
		background: #E9E9E9;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #363636;
		opacity: 1;
		display: flex;
		align-items: center;
		border-left: 6rpx solid #E9E9E9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shop_left_active {
		background: #ffffff !important;
		border-left: 6rpx solid #FDBC28 !important;
	}

	.shop_r_image {
		width: 194rpx;
		height: 188rpx;
		background: #EEEEEE;
		opacity: 1;
		border-radius: 10rpx;
	}

	.shop_r_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.shop_r_pay {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E80000;
	}

	.shop_r_icon {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
	}

	.submit_bottom {
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.submit_icon {
		width: 98rpx;
		height: 98rpx;
		margin-left: 30rpx;
		margin-top: -60rpx;
	}

	.submit_button {
		width: 191rpx;
		height: 98rpx;
		background: linear-gradient(180deg, #FDBF29 0%, #FDD438 100%);
		line-height: 98rpx;
		text-align: center;
		color: white;
	}

	.submit1 {
		width: 282rpx;
		height: 85rpx;
		background: linear-gradient(180deg, #FE6F04 0%, #FB5303 100%);
		border-radius: 45rpx;
		line-height: 85rpx;
		text-align: center;
		color: white;
	}

	.submit2 {
		width: 282rpx;
		height: 85rpx;
		background: linear-gradient(180deg, #FDC02A 0%, #FDD035 100%, #FB5303 100%);
		border-radius: 45rpx;
		line-height: 85rpx;
		text-align: center;
		color: white;
	}

	.shop_caozuo {
		width: 190rpx;
		height: 53rpx;
		background: #FFFFFF;
		border: 1rpx solid #EFEFEF;
		opacity: 1;
		border-radius: 5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop_jian {
		width: 50rpx;
		text-align: center;
	}

	.shop_num {
		width: 75rpx;
		height: 52rpx;
		background: #ECECEC;
		line-height: 52rpx;
		text-align: center;
	}

	.shop_add {
		width: 50rpx;
		text-align: center;
	}

	.shop_image {
		width: 191rpx;
		height: 182rpx;
		opacity: 1;
		background-color: #EEEEEE;
		border-radius: 20rpx;
	}

	.warp_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.table {
		width: 154rpx;
		height: 55rpx;
		background: #F1F1F1;
		opacity: 1;
		border-radius: 28rpx;
		line-height: 55rpx;
		color: white;
		text-align: center;
		margin-right: 30rpx;
		color: #787878;
	}

	.active_table {
		background: #FDC22B !important;
		color: white;
	}

	.shop_left {
		width: 161rpx;
		height: 100rpx;
		background: #E9E9E9;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #363636;
		opacity: 1;
		display: flex;
		align-items: center;
		border-left: 6rpx solid #E9E9E9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shop_left_active {
		background: #ffffff !important;
		border-left: 6rpx solid #FDBC28 !important;
	}

	.shop_r_image {
		width: 194rpx;
		height: 188rpx;
		background: #EEEEEE;
		opacity: 1;
		border-radius: 10rpx;
	}

	.shop_r_title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.shop_r_pay {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E80000;
	}

	.shop_r_icon {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
	}

	.submit_bottom {
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.submit_icon {
		width: 98rpx;
		height: 98rpx;
		margin-left: 30rpx;
		margin-top: -60rpx;
	}

	.submit_button {
		width: 191rpx;
		height: 98rpx;
		background: linear-gradient(180deg, #FDBF29 0%, #FDD438 100%);
		line-height: 98rpx;
		text-align: center;
		color: white;
	}

	.submit1 {
		width: 282rpx;
		height: 85rpx;
		background: linear-gradient(180deg, #FE6F04 0%, #FB5303 100%);
		border-radius: 45rpx;
		line-height: 85rpx;
		text-align: center;
		color: white;
	}

	.submit2 {
		width: 282rpx;
		height: 85rpx;
		background: linear-gradient(180deg, #FDC02A 0%, #FDD035 100%, #FB5303 100%);
		border-radius: 45rpx;
		line-height: 85rpx;
		text-align: center;
		color: white;
	}

	.shop_caozuo {
		width: 190rpx;
		height: 53rpx;
		background: #FFFFFF;
		border: 1rpx solid #EFEFEF;
		opacity: 1;
		border-radius: 5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop_jian {
		width: 50rpx;
		text-align: center;
	}

	.shop_num {
		width: 75rpx;
		height: 52rpx;
		background: #ECECEC;
		line-height: 52rpx;
		text-align: center;
	}

	.shop_add {
		width: 50rpx;
		text-align: center;
	}
</style>
